
<template>
  <div class="video-player" :style="containerStyle">
    <!-- 默认视频或封面图片 -->
    <div v-if="!data.src" class="empty-state" :style="emptyStateStyle">
      <!-- 如果有封面图片，显示封面 -->
      <div v-if="data.coverUrl" class="cover-image-container">
        <img :src="data.coverUrl" alt="视频封面" class="cover-image" />
        <div class="cover-overlay">
          <el-icon size="60px" color="#ffffff">
            <VideoPlay />
          </el-icon>
          <p class="cover-text">点击上传视频</p>
        </div>
      </div>
      <!-- 如果没有封面图片，显示默认图标 -->
      <template v-else>
        <el-icon size="80px" color="#999999">
          <VideoPlay />
        </el-icon>
        <p class="empty-text">暂无视频</p>
      </template>
    </div>

    <!-- 选择视频后 -->
    <div v-else class="video-container" :style="videoContainerStyle">
      <video
        ref="videoRef"
        :key="`${data.src}-${data.coverUrl}`"
        :src="data.src"
        :poster="data.coverUrl"
        :controls="data.showControls"
        :autoplay="data.autoplay"
        :loop="data.loop"
        :muted="data.muted"
        width="100%"
        height="100%"
        @play="onPlay"
        @pause="onPause"
        @ended="onEnded"
      />
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { VideoPlay } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 视频元素引用
const videoRef = ref(null)

// 计算容器样式
const containerStyle = computed(() => {
  return {
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`,
    borderRadius: `${props.data.borderRadius || 0}px`
  }
})

// 计算空状态样式
const emptyStateStyle = computed(() => {
  return {
    height: `${props.data.height || 210}px`,
    backgroundColor: props.data.backgroundColor || '#979797'
  }
})

// 计算视频容器样式
const videoContainerStyle = computed(() => {
  return {
    height: `${props.data.height || 210}px`,
    backgroundColor: props.data.backgroundColor || '#000000'
  }
})

// 事件处理
function onPlay() {
  console.log('视频开始播放')
}

function onPause() {
  console.log('视频暂停')
}

function onEnded() {
  console.log('视频播放结束')
}
</script>

<style lang="scss" scoped>
.video-player {
  width: 100%;
  box-sizing: border-box;

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;

    .empty-text {
      margin-top: 10px;
      color: #ffffff;
    }
    
    .cover-image-container {
      width: 100%;
      height: 100%;
      position: relative;
      
      .cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .cover-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        .cover-text {
          margin-top: 10px;
          color: #ffffff;
          font-size: 14px;
        }
      }
    }
  }

  .video-container {
    width: 100%;
    overflow: hidden;
    position: relative;

    video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
</style>
